<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>新将包网站</title>
<style>
:root{
--transition1:all 0.5s;
}
body{
background:rgb(255 251 229 / 47%);;
font-size:24px;
}
.headline{
width:287px;
font-size:49px;
margin:auto;
margin-top:18px;
margin-bottom:18px;
cursor:pointer;
}
.headline span{
font-size:12px;
transition:var(--transition1);
}
.headline p{
display:inline;
transition:var(--transition1);
}
.headline p:nth-child(1):hover{
text-shadow: 2px 2px 5px #78d1f9;
}
.headline p:nth-child(2):hover{
text-shadow: 2px 2px 5px #cd2039;
}
.headline p:nth-child(3):hover{
text-shadow: 2px 2px 5px #f0c68a;
}
.headline p:nth-child(4):hover{
text-shadow: 2px 2px 5px #86819a;
}
.headline p:nth-child(5):hover{
text-shadow: 2px 2px 5px #4ef74e;
}
.headline span:nth-child(2):hover{
text-shadow: 2px 2px 5px rgba(22, 2, 37, 0.96);
}
.headline span:nth-child(3):hover{
text-shadow: 2px 2px 5px #efef29;
}
.headline span:nth-child(4):hover{
text-shadow: 2px 2px 5px #eabbcd;
}
.link{
background-image:linear-gradient(to bottom right,#513d62,#ab264b,#f1eaa2,#f5efdd);
}
.link ul{
padding:0px;
}
.link ul li{
cursor:pointer;
transition:var(--transition1);
}
.link ul li:hover{
background-color:#e4d5b7;
color:rgb(101 0 0 / 95%);
}
#content{
width:100%;
background-color:rgb(63 135 142 / 79%);;
padding-bottom:8%;
}
#content .h{
background-image:linear-gradient(to bottom right,#7fef86,#7093DB,#f0acf7);
font-size:40px;
cursor:default;
margin-bottom:4%
}
.circle{
border-radius:50%;
width:40px;
height:40px;
background-color:red;
margin:6px;
float:left;
}
#content ol{
list-style-type:none;
padding:0px;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
width:80%;
margin:auto;
}
#content ol li{
border-top:1px solid black;
transition:var(--transition1);
}
#content ol li:hover{
background-image:linear-gradient(to bottom right,#7093DB,#f0acf7,#f7f0ac);
cursor:pointer;
color:#cd2039;
}
#content ol li span{
float:right;
}
#content ol li .expanation{
text-decoration: underline;
text-shadow: 0px 0px 50px rgb(30 178 193 / 23%)
}
#content ol li p{
display:inline;
margin-left:1%
}
#content ol li div{
display:inline;
width:144px;
float:left
}

@media screen and (max-width:425px){
body{
font-size:15px;
}
.headline {
    width: 237px;
    height:51px;
    font-size: 39px;
    margin: auto;
    margin-top: 18px;
    margin-bottom: 18px;
    cursor: pointer;
}
#content .h {
    font-size: 25px;
}
.circle {
    width: 25px;
    height: 25px;
    margin-bottom: 2%;
}
#content ol li div{
width:90px;
}

}
</style>

</head>
<body>
<div class='headline'><b><p>新</p><p>将</p><p>包</p><p>网</p><p>站</p></b><span>by </span><span>新</span><span>元</span></div>
<div class="link">
<ul>
<li id='information'>信息一览</li>
<li id='character'>武将一览</li>
<li id='concept'>概念一览</li>
<li id='xjb_hunbi'>魂币系统一览</li>
</ul>
</div>
<div id='content'>
<div class='h'><div class='circle'></div><span>消息一览</span></div>
<ol>
</ol>
</div>
<script>
"use script"
//创建全局变量ui
var ui={
//以下是单元素节点
headline:document.getElementsByClassName('headline')[0],
link:document.getElementById('information').parentNode.parentNode,
link_ul:document.getElementById('information').parentNode,
information:document.getElementById('information'),
character:document.getElementById('character'),
concept:document.getElementById('concept'),
content:document.getElementById('content'),
content_ol:document.getElementById('content').children[1],
h:document.getElementsByClassName('h')[0],
circle:document.getElementsByClassName('circle')[0],
head:document.getElementsByTagName('head')[0],
body:document.body,
//
observe:new MutationObserver(function(){}),
//以下是元素节点集合
link_lis:Array.from(document.getElementById('information').parentNode.children),
content_lis:Array.from(document.getElementById('content').children[1].children),
headline_ps:Array.from(document.getElementsByClassName('headline')[0].getElementsByTagName('p')),
headline_spans:Array.from(document.getElementsByClassName('headline')[0].getElementsByTagName('span')),
//以下是方法
//方法 给样式
giveStyle:function(element,obj){
for(let i in obj){
element.style[i]=obj[i]
}
},
//方法 给样式2
giveStyle2:function(str){
let style = document.createElement('style');
style.innerHTML=str
ui.head.firstElementChild.appendChild(style)
},
giveEvent:function(list,func){
for(let i=0;i<list.length;i++){
list[i].addEventListener('click',new Function('e',func))
}
}

}
//输出ui对象
console.log(ui)
//
var typeOf=function(target){
let str=Object.prototype.toString.apply(target,[]).slice(8,-1)
var a=str.indexOf('HTML'),b=str.indexOf('Element')
if(a>=0&&b>=0)str=str.slice(a+4,b)
return str.toLowerCase()
}
//
function Creator(id,str){
this[id]=true,
this.F={character:function(){},xjb_hunbi:function(){},inforamtion:function(){},concept:function(){}}
return this
}
//设置ui.content的显示内容函数
ui.content.showContent=function(id){
ui.content_ol.innerHTML='';
let list=Object.keys(lib[id]).sort()
if(id==='information') list.reverse()
for(let i=0;i<list.length;i++){
var li=document.createElement('li');
li.innerHTML=lib[id][list[i]][0]
ui.content_ol.appendChild(li);
var creator=new Creator(this.id,list[i],li)
}
};
/**/
//设置事件
(function(){
ui.observe.observe(document,{childList:true,subtree: true})
ui.giveEvent(ui.headline_ps,`
let list=['#78d1f9','#cd2039','#f0c68a','#86819a','#4ef74e'],i=ui.headline_ps.indexOf(e.target);
ui.giveStyle(ui.body,{color:list[i]})
`)
ui.giveEvent(ui.headline_spans,`
let list=['rgba(22, 2, 37, 0.96)','#efef29','#eabbcd'],i=ui.headline_spans.indexOf(e.target);
ui.giveStyle(ui.body,{color:list[i]})
`)
for(let i=0;i<ui.link_lis.length;i++){
ui.link_lis[i].addEventListener('click',function(){
ui.h.children[1].textContent=lib.translate[this.id]+'一览'
ui.content.showContent(this.id);
});
}
})();
</script>
<script src=http://xinyuanwm.3vkj.club/js/data.js type=text/javascript onload="ui.content.showContent('information')"></script>
</body>
</html>

